<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl着色器</title>
    <script src="lib/webgl-debug.js"></script>
    <script src="lib/webgl-utils.js"></script>
    <script src="lib/cuon-utils.js"></script>
    <script src="lib/cuon-matrix.js"></script>
</head>


<body onload="main()">
    <canvas id="canvas" height="800" width="800"></canvas>
</body>
<script>
    /*第一部分顶点着色器接收顶点的纹理坐标，传递给片元着色器*/
    var VSHADER_SOURCE = `
  attribute vec4 position;
  attribute vec2 texcoord;
  varying vec2 coord;
  void main(){
    gl_Position = position;
    coord = texcoord;
  }
  `

    var FSHADER_SOURCE = `
    precision mediump float; 
    uniform sampler2D sampler; 
    varying vec2 coord; 
    void main(){ 
       gl_FragColor = texture2D(sampler,coord); 
    }`

    /*第二部分 main()方法 初始化着色器，设置顶点信息，调用配置纹理方法*/
    function main() {
        var canvas = document.getElementById("canvas");
        var gl = getWebGLContext(canvas);
        if (!gl) {
            console.log("你的电脑不支持WebGL！");
            return;
        }
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.log("初始化着色器失败！");
            return;
        }

        //设置顶点的相关信息
        var n = initVertexBuffers(gl);

        if (n < 0) {
            console.log("无法获取到点的数据");
            return;
        }

        //配置纹理
        if (!initTextures(gl, n)) {
            console.log("无法配置纹理");
            return;
        }



    }

    /*第三部分 initVertexBuffers() 设置顶点坐标和纹理坐标 调用initTextures()进行下一步处理*/
    function initVertexBuffers(gl) {
        var verticesSizes = new Float32Array([

            -0.3, 0.3, 0, 1,
            0.5, 0.5, 1, 1, -0.5, -0.5, 0, 0,
            0.5, -0.5, 1, 0,
        ]);

        var n = 4;
        var vertexSizeBuffer = gl.createBuffer();
        if (!vertexSizeBuffer) {
            console.log("无法创建缓冲区");
            return -1;
        }
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW);
        var position = gl.getAttribLocation(gl.program, "position");
        if (position < 0) {
            console.log("无法获取到存储位置");
            return;
        }

        //获取数组一个值所占的字节数
        var fsize = verticesSizes.BYTES_PER_ELEMENT;

        //将顶点坐标的位置赋值
        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, fsize * 4, 0);
        gl.enableVertexAttribArray(position);

        //将顶点的纹理坐标分配给texcoord并开启它
        var texcoord = gl.getAttribLocation(gl.program, "texcoord");
        if (texcoord < 0) {
            console.log("无法获取到存储位置");
            return;
        }

        //将纹理坐标赋值
        gl.vertexAttribPointer(texcoord, 2, gl.FLOAT, false, fsize * 4, fsize * 2);
        gl.enableVertexAttribArray(texcoord);
        return n;
    }

    /*第四部分 initTextures() 创建纹理对象 并调用纹理绘制方法*/
    function initTextures(gl, n) {
        var texture = gl.createTexture(); //创建纹理对象
        if (!texture) {
            console.log("无法创建纹理对象");
            return;
        }

        //获取sampler的存储位置
        var sampler = gl.getUniformLocation(gl.program, "sampler");
        if (sampler < 0) {
            console.log("无法获取变量的存储位置");
            return;
        }

        //创建Image对象，并绑定加载完成事件
        var image = new Image();
        image.onload = function() {
            loadTexture(gl, n, texture, sampler, image);
        };

        image.src = "./image/4.jpg";
        return true;
    }

    /*第五部分 设置纹理相关信息供WebGL使用，并进行绘制*/
    function loadTexture(gl, n, texture, sampler, image) {
        //对纹理图像进行y轴反转
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
        //开启0号纹理单元
        gl.activeTexture(gl.TEXTURE0);
        //向target绑定纹理对象
        gl.bindTexture(gl.TEXTURE_2D, texture);
        //配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        //配置纹理图像
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
        //将0号纹理传递给着色器
        gl.uniform1i(sampler, 0);

        //绘制
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
    }
</script>

</html>